.nav {
    height: 60px;
    line-height: 60px;
    background-color: #42cedd;

}

.nav > ul {
    display: flex;
    position: relative;
}

.nav > ul > li {
    padding: 0 20px;
}


.nav .subitem {
    width: 100%;
    position: absolute;
    left: 0;
    top: 60px;
    height: 0;
    background-color: #50a3d0;
    transition: height 0.5s;
    -webkit-transition: height 0.5s; /* Safari */
    overflow: hidden;
}

.nav > ul > li:hover .subitem {
    height: 60px;
    line-height: 60px;
}

.nav > ul > li:hover ul {
    display: block;
}

.nav .subitem ul {
    display: none;
}

.nav .subitem ul li {
    float: left;
}

.nav .subitem ul li a {
    padding: 0 20px;
    color: #ffffff;
}
